<template>
	<div id="app">
		<transition :name="animationName">
			<router-view id="routerId" />
		</transition>
		<span id="pullToBtmId"></span>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				animationName: 'forward'
			}
		},
		components: {},
		methods: {},
		created: function() {},
		mounted: function() {
			var vm = this;
			window.scrollTo(0,0)
			global.pmto = function(path, pm) {
				vm.$router.push({
					path: path,
					query: pm
				});
			};
			global.getH = function(elName) {
				if(!document.getElementById(elName)){
					return
				}
				return window.getComputedStyle(document.getElementById(elName)).height.replace('px', '')
			};
			global.clientH = document.documentElement.clientHeight;
			global.qid = function(elName) {
				return document.getElementById(elName)
			};
			global.setMin = function(elName) {
				document.getElementById(elName).style.minHeight = clientH + 'px';
			}
			//滚动条滚动事件
			var srctop;
			window.onscroll = function(e) {
				srctop = document.documentElement.scrollTop || document.body.scrollTop;
				distanceTop.val = srctop;
				if(parseInt(getH('pullId') - clientH) - srctop <= 30) {
					qid('pullToBtmId').click();
				}
			}
		},
		watch: {
			'$route': function(to, fm) {
				window.scrollTo(0, 0)
				if(sessionStorage.isForward - 0) {
					this.animationName = 'forward'
				} else {
					this.animationName = 'back'
				}
				sessionStorage.isForward = 0;
				if(this.$route.path.indexOf('home') >= 0) {
					if(document.getElementById('routerId')) {
						this.animationName = '';
						document.getElementById('routerId').style.transition = "none"
					}
				}
			}
		}
	}
</script>

<style>
	#routerId {
		transition: all .4s;
	}
	
	.forward-enter {
		transform: translateX(100%);
	}
	
	.forward-enter-active {
		transform: translateX(100%);
	}
	
	.forward-leave {
		transform: translateX(-100%);
	}
	
	.forward-leave-active {
		transform: translateX(-100%);
	}
	
	.back-enter {
		transform: translateX(-200%);
	}
	
	.back-enter-active {
		transform: translateX(-200%);
	}
	
	.back-leave {
		transform: translateX(100%);
	}
	
	.back-leave-active {
		transform: translateX(100%);
	}
	
	html,
	body {
		margin: 0;
		padding: 0;
		margin: 0 auto;
		max-width: 450px;
		height: 100%;
	}
	
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		height: 100%;
	}
	
	#app>section {
		height: 100%;
	}
	
	* {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	.fixMax {
		max-width: 450px;
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-o-transform: translateZ(0);
		transform: translateZ(0);
	}
	
	textarea,
	input {
		outline: none !important;
	}
	
	input::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder {
		color: #A7B2C7;
	}
	
	input:-moz-placeholder,
	textarea:-moz-placeholder {
		color: #A7B2C7;
	}
	
	input::-moz-placeholder,
	textarea::-moz-placeholder {
		color: #A7B2C7;
	}
	
	input:-ms-input-placeholder,
	textarea:-ms-input-placeholder {
		color: #A7B2C7;
	}
	
	p {
		margin: 0;
		padding: 0;
	}
	
	a {
		text-decoration: none;
	}
	
	body {
		font-size: 0.14rem;
		margin: 0 auto;
		background-color: #F3F4F6;
	}
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		opacity: 0;
	}
	
	.placeP {
		height: 0.1rem;
		background-color: #ECECEC;
	}
	
	.fullBtn {
		line-height: 0.46rem;
		border-radius: 4px;
		text-align: center;
		color: #FFFFFF;
		background-color: rgb(158, 129, 104);
	}
</style>